<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:currentkey=='all'}" href="javascript:;"   @click="changekey('all')"  >全部</a>
      </li>
      <li>
        <a :class="{selected:currentkey=='todo'}" href="javascript:;"  @click="changekey('todo')">未完成</a>
      </li>
      <li>
        <a  :class="{selected:currentkey=='done'}" href="javascript:;"   @click="changekey('done')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed"  @click="delAll">清除已完成</button>
  </footer>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
      return {
        currentkey:'all'
      }
  },
  methods: {
    changekey(key) {
      this.currentkey = key
      this.$store.commit('TodoMain/setTodoMainKey',key)
    },
    delAll() {
      const list = this.TodoMain.filter(item => item.done == false)
     this.$store.commit('TodoMain/setTodoMainList',list)
      
    }
  },
  computed: {
    ...mapGetters(['TodoMain','DoneList','ShowList'])
  }
}
</script>
